<template>
	<div class="message_container">
		<div class="message">
			<div class="message_top">
				<div class="message_top_left">
					<svg
						t="1666083821143"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="4829"
						width="32"
						height="32"
					>
						<path
							d="M586.945923 513.581008c55.067176-27.962865 92.91211-85.125773 92.91211-150.998039 0-93.338828-75.937506-169.276335-169.277358-169.276335s-169.275311 75.937506-169.275311 169.276335c0 65.872267 37.844933 123.034151 92.911086 150.998039-95.652524 32.016181-164.778904 122.45496-164.778904 228.743728 0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707c0-110.36869 89.791026-200.160739 200.160739-200.160739S710.741413 631.956046 710.741413 742.324736c0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707C751.723803 636.035968 682.598446 545.598212 586.945923 513.581008zM382.287753 362.582969c0-70.742181 57.552787-128.293945 128.292921-128.293945 70.742181 0 128.293945 57.552787 128.293945 128.293945 0 70.741157-57.552787 128.292921-128.293945 128.292921C439.84054 490.876913 382.287753 433.324126 382.287753 362.582969z"
							p-id="4830"
						></path>
						<path
							d="M827.871087 196.127889C743.498468 111.757317 631.320573 65.290005 512 65.290005S280.500509 111.756293 196.128913 196.127889C111.756293 280.501532 65.291029 392.678404 65.291029 511.998977s46.465265 231.499491 130.837884 315.872111 196.550515 130.837884 315.871087 130.837884 231.498468-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 511.998977 912.243707 280.500509 827.871087 196.127889zM512 917.726581c-223.718271 0-405.726581-182.007287-405.726581-405.727605 0-223.718271 182.00831-405.726581 405.726581-405.726581s405.726581 182.007287 405.726581 405.726581C917.726581 735.719294 735.718271 917.726581 512 917.726581z"
							p-id="4831"
						></path>
					</svg>
				</div>
				<div class="message_top_right"><span>登录</span>发表留言</div>
			</div>
			<div class="message_bottom">
				<div class="message_title">留言(19)</div>
				<div class="message_content">
					<div class="message_content_left">
						<img src="../../assets/images/1.jpg" alt="" />
					</div>
					<div class="message_content_right">
						<div class="top_span">
							<div style="width: 900px">
								<p>陈小林</p>
								<p style="color: #b1b5c1">10-01</p>
							</div>
							<div>
								<span class="inlan"
									><svg
										t="1666086955266"
										class="icon"
										viewBox="0 0 1024 1024"
										version="1.1"
										xmlns="http://www.w3.org/2000/svg"
										p-id="6572"
										width="16"
										height="16"
									>
										<path
											d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
											p-id="6573"
										></path></svg
								></span>
								<span>1</span>
								<span class="inlan" style="margin-left: 20px"
									><svg
										t="1666087296873"
										class="icon"
										viewBox="0 0 1024 1024"
										version="1.1"
										xmlns="http://www.w3.org/2000/svg"
										p-id="3185"
										width="16"
										height="16"
									>
										<path
											d="M511.913993 928.016126c-8.256677 0-16.341341-3.096254-22.705863-9.460776l-95.983874-95.983874c-12.55703-12.55703-12.55703-32.682681 0-45.239711s32.682681-12.55703 45.239711 0l73.450025 73.450025 73.450025-73.450025c6.020494-6.020494 14.105157-9.460776 22.705863-9.460776l223.962372 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L864.026877 223.962372c0-17.545439-14.277171-31.994625-31.994625-31.994625l-639.892491 0c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 511.913993c0 17.717453 14.449185 31.994625 31.994625 31.994625l95.983874 0c17.717453 0 31.994625 14.277171 31.994625 31.994625s-14.277171 31.994625-31.994625 31.994625l-95.983874 0c-52.980346 0-95.983874-43.003528-95.983874-95.983874L96.155888 223.962372c0-52.980346 43.003528-95.983874 95.983874-95.983874l639.892491 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 511.913993c0 52.980346-43.003528 95.983874-95.983874 95.983874L621.142953 831.860239 534.619856 918.55535C528.427348 924.747858 520.17067 928.016126 511.913993 928.016126z"
											p-id="3186"
										></path>
										<path
											d="M335.943558 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937 47.991937 21.501764 47.991937 47.991937S362.433731 511.913993 335.943558 511.913993z"
											p-id="3187"
										></path>
										<path
											d="M527.911305 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937 47.991937 21.501764 47.991937 47.991937S554.401478 511.913993 527.911305 511.913993z"
											p-id="3188"
										></path>
										<path
											d="M720.051067 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937c26.490173 0 47.991937 21.501764 47.991937 47.991937S746.369226 511.913993 720.051067 511.913993z"
											p-id="3189"
										></path></svg
								></span>
							</div>
						</div>
						<div class="divTitle">
							很早就看到过我也是那个节目的忠实粉丝。很感谢您提出的批评建议。不论是编排还是表演都非常优秀我各人也很喜欢，当时她们跳的是结合了蒙古族舞蹈的元素，但每个人感观有所不同才另作品从作者创作到演员二次创作再至每个观众不同的感受最终让作品更加完整，就像您感受到悲伤的感觉，而我体会到的是信仰，纯净，轻盈，并且编创时考虑了成人零基础的藏族舞蹈学习，所以表演和技术难度相对专业来说也多了很多限制。我也会继续学习
						</div>
						<div class="bottom_span">
							<p class="p_color">vivid530:</p>
							<p>
								这是一首非常悲伤的歌。感觉编排和歌曲真的不搭。建议去看下之前舞林争霸里面的选手表演的🥲
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="message_bottom">
				<div class="message_title">留言(19)</div>
				<div class="message_content">
					<div class="message_content_left">
						<img src="../../assets/images/1.jpg" alt="" />
					</div>
					<div class="message_content_right">
						<div class="top_span">
							<div style="width: 900px">
								<p>陈小林</p>
								<p style="color: #b1b5c1">10-01</p>
							</div>
							<div>
								<span class="inlan"
									><svg
										t="1666086955266"
										class="icon"
										viewBox="0 0 1024 1024"
										version="1.1"
										xmlns="http://www.w3.org/2000/svg"
										p-id="6572"
										width="16"
										height="16"
									>
										<path
											d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
											p-id="6573"
										></path></svg
								></span>
								<span>1</span>
								<span class="inlan" style="margin-left: 20px"
									><svg
										t="1666087296873"
										class="icon"
										viewBox="0 0 1024 1024"
										version="1.1"
										xmlns="http://www.w3.org/2000/svg"
										p-id="3185"
										width="16"
										height="16"
									>
										<path
											d="M511.913993 928.016126c-8.256677 0-16.341341-3.096254-22.705863-9.460776l-95.983874-95.983874c-12.55703-12.55703-12.55703-32.682681 0-45.239711s32.682681-12.55703 45.239711 0l73.450025 73.450025 73.450025-73.450025c6.020494-6.020494 14.105157-9.460776 22.705863-9.460776l223.962372 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L864.026877 223.962372c0-17.545439-14.277171-31.994625-31.994625-31.994625l-639.892491 0c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 511.913993c0 17.717453 14.449185 31.994625 31.994625 31.994625l95.983874 0c17.717453 0 31.994625 14.277171 31.994625 31.994625s-14.277171 31.994625-31.994625 31.994625l-95.983874 0c-52.980346 0-95.983874-43.003528-95.983874-95.983874L96.155888 223.962372c0-52.980346 43.003528-95.983874 95.983874-95.983874l639.892491 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 511.913993c0 52.980346-43.003528 95.983874-95.983874 95.983874L621.142953 831.860239 534.619856 918.55535C528.427348 924.747858 520.17067 928.016126 511.913993 928.016126z"
											p-id="3186"
										></path>
										<path
											d="M335.943558 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937 47.991937 21.501764 47.991937 47.991937S362.433731 511.913993 335.943558 511.913993z"
											p-id="3187"
										></path>
										<path
											d="M527.911305 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937 47.991937 21.501764 47.991937 47.991937S554.401478 511.913993 527.911305 511.913993z"
											p-id="3188"
										></path>
										<path
											d="M720.051067 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937c26.490173 0 47.991937 21.501764 47.991937 47.991937S746.369226 511.913993 720.051067 511.913993z"
											p-id="3189"
										></path></svg
								></span>
							</div>
						</div>
						<div class="divTitle">
							很早就看到过我也是那个节目的忠实粉丝。很感谢您提出的批评建议。不论是编排还是表演都非常优秀我各人也很喜欢，当时她们跳的是结合了蒙古族舞蹈的元素，但每个人感观有所不同才另作品从作者创作到演员二次创作再至每个观众不同的感受最终让作品更加完整，就像您感受到悲伤的感觉，而我体会到的是信仰，纯净，轻盈，并且编创时考虑了成人零基础的藏族舞蹈学习，所以表演和技术难度相对专业来说也多了很多限制。我也会继续学习
						</div>
						<div class="bottom_span">
							<p class="p_color">vivid530:</p>
							<p>
								这是一首非常悲伤的歌。感觉编排和歌曲真的不搭。建议去看下之前舞林争霸里面的选手表演的🥲
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="message_bottom">
				<div class="message_title">留言(19)</div>
				<div class="message_content">
					<div class="message_content_left">
						<img src="../../assets/images/1.jpg" alt="" />
					</div>
					<div class="message_content_right">
						<div class="top_span">
							<div style="width: 900px">
								<p>陈小林</p>
								<p style="color: #b1b5c1">10-01</p>
							</div>
							<div>
								<span class="inlan"
									><svg
										t="1666086955266"
										class="icon"
										viewBox="0 0 1024 1024"
										version="1.1"
										xmlns="http://www.w3.org/2000/svg"
										p-id="6572"
										width="16"
										height="16"
									>
										<path
											d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
											p-id="6573"
										></path></svg
								></span>
								<span>1</span>
								<span class="inlan" style="margin-left: 20px"
									><svg
										t="1666087296873"
										class="icon"
										viewBox="0 0 1024 1024"
										version="1.1"
										xmlns="http://www.w3.org/2000/svg"
										p-id="3185"
										width="16"
										height="16"
									>
										<path
											d="M511.913993 928.016126c-8.256677 0-16.341341-3.096254-22.705863-9.460776l-95.983874-95.983874c-12.55703-12.55703-12.55703-32.682681 0-45.239711s32.682681-12.55703 45.239711 0l73.450025 73.450025 73.450025-73.450025c6.020494-6.020494 14.105157-9.460776 22.705863-9.460776l223.962372 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L864.026877 223.962372c0-17.545439-14.277171-31.994625-31.994625-31.994625l-639.892491 0c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 511.913993c0 17.717453 14.449185 31.994625 31.994625 31.994625l95.983874 0c17.717453 0 31.994625 14.277171 31.994625 31.994625s-14.277171 31.994625-31.994625 31.994625l-95.983874 0c-52.980346 0-95.983874-43.003528-95.983874-95.983874L96.155888 223.962372c0-52.980346 43.003528-95.983874 95.983874-95.983874l639.892491 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 511.913993c0 52.980346-43.003528 95.983874-95.983874 95.983874L621.142953 831.860239 534.619856 918.55535C528.427348 924.747858 520.17067 928.016126 511.913993 928.016126z"
											p-id="3186"
										></path>
										<path
											d="M335.943558 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937 47.991937 21.501764 47.991937 47.991937S362.433731 511.913993 335.943558 511.913993z"
											p-id="3187"
										></path>
										<path
											d="M527.911305 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937 47.991937 21.501764 47.991937 47.991937S554.401478 511.913993 527.911305 511.913993z"
											p-id="3188"
										></path>
										<path
											d="M720.051067 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937c26.490173 0 47.991937 21.501764 47.991937 47.991937S746.369226 511.913993 720.051067 511.913993z"
											p-id="3189"
										></path></svg
								></span>
							</div>
						</div>
						<div class="divTitle">
							很早就看到过我也是那个节目的忠实粉丝。很感谢您提出的批评建议。不论是编排还是表演都非常优秀我各人也很喜欢，当时她们跳的是结合了蒙古族舞蹈的元素，但每个人感观有所不同才另作品从作者创作到演员二次创作再至每个观众不同的感受最终让作品更加完整，就像您感受到悲伤的感觉，而我体会到的是信仰，纯净，轻盈，并且编创时考虑了成人零基础的藏族舞蹈学习，所以表演和技术难度相对专业来说也多了很多限制。我也会继续学习
						</div>
						<div class="bottom_span">
							<p class="p_color">vivid530:</p>
							<p>
								这是一首非常悲伤的歌。感觉编排和歌曲真的不搭。建议去看下之前舞林争霸里面的选手表演的🥲
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import {
	Check,
	Delete,
	Edit,
	Message,
	Search,
	Star,
	ChatDotRound,
} from "@element-plus/icons-vue"
</script>

<style scoped>
.message_container {
	width: 100%;
	background: #f5f7f9;
	padding-top: 20px;
}
.message {
	margin: 0 auto;
	width: 1200px !important;
	background: #ffffff;
}

.message_top {
	height: 80px;
	display: flex;
}

.message_top_left {
	width: 51px;
	margin: 25px 0px 0 20px;
}

.inlan {
	vertical-align: middle;
}

.message_top_right {
	width: 970px;
	height: 62px;
	background: #f5f7f9;
	margin-top: 10px;
	color: #b1b5c1;
	text-align: center;
	line-height: 62px;
}

.message_top_right span {
	color: #f93684;
	margin: 0 10px;
}

.message_bottom {
	margin-top: 20px;
}

.message_title {
	font-size: 24px;
	margin: 0 20px;
	height: 70px;
	line-height: 70px;
	border-bottom: 1px solid #eaecf0;
}

.message_content {
	height: 270px;
	border-bottom: 1px solid #eaecf0;
	display: flex;
	margin: 20px 20px 0;
}

.message_content_left {
	width: 40px;
	height: 40px;
}

.message_content_left img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.message_content_right {
	width: 970px;
	margin-left: 10px;
	font-size: 14px;
}

.top_span {
	display: flex;
}

.bottom_span {
	height: 84px;
	background: #f5f7f9;
	padding: 15px 20px;
}

.bottom_span p {
	margin: 10px;
}

.p_color {
	color: #b1b5c1;
}

.divTitle,
.bottom_span {
	margin-top: 15px;
}
</style>
